import React, { Component } from 'react';
//2属性代理 -抽离state

class InputName extends Component {
  render() {
    return <input value={this.props.value} onChange={this.props.onChange}></input>
  }
};
// 高阶组件withOnChange
function withOnChange(WrappedComponent) {
  return class extends Component {
    state = {
      value: "(*^_^*)"
    };
    handleChange = (e) => {
      this.setState({
        value: e.target.value,
      });
    };
    render() {
      return(
      // Input
      <WrappedComponent value={this.state.value} onChange={this.handleChange}></WrappedComponent>
      )
    }
  }
}
let WrappedInputName = withOnChange(InputName)
class App extends Component {

  render() {
    return (
      <div>
        <WrappedInputName></WrappedInputName>
      </div>
    );
  }
}

export default App;
